<template>
    <div class="refresh" @click="refresh">
        <i :class="[rotate?'Rotation':'','refresh-button']"></i>
        <span class="refresh-text" v-show="text">{{text}}</span>
    </div>
</template>

<script>
export default {
    name:"refresh",
    data(){
        return{
            rotate: false
        }
    },
    props:{
        text: {
            type: String,
            default: ''
        }
    },
    activated(){
        this.rotate = false
    },
    methods: {
        refresh(){
            this.rotate = true;
            this.$emit('refreshData');
        }
    }
}
</script>

<style lang="less" scoped>
.refresh{
    width:25px;
    display: inline-block;
}
.refresh-button{
    margin: 0 auto;
    display:inline-block;
    width:20px;
    height:20px;
    vertical-align: middle;
    background: url("./images/refresh.svg") no-repeat center center;
    background-size: 20px 20px;
    -webkit-app-region: no-drag;
    cursor:pointer;
}
.refresh-text{
    display: inline-block;
    margin-top: 12px;
}
@keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(-180deg);}
}
.Rotation{
    animation: rotation 1s;
    animation-iteration-count:1;
}
</style>
